<template>
  <div class="notice">
    <div v-loading="loading" class="list">
      <h2>平台通知列表</h2>
      <div class="table">
        <div class="title">
          <p class="index">序号</p>
          <p class="text">通知内容</p>
          <p class="date">通知时间</p>
        </div>
        <div v-for="(item, index) in list" :key="item.id" class="content">
          <p class="index">{{ index + 1 | addZeroPrefix }}</p>
          <p class="text"><router-link :to="{ name: 'NoticeDetail', query: { res: JSON.stringify(item) }}">{{ item.type }}{{ item.name }}</router-link></p>
          <p class="date">{{ new Date(item.createDate) | getDate }} {{ new Date(item.createDate) | getTime }}</p>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, jumper"
        :total="noticeCount"
        :hide-on-single-page="true"
        :page-sizes="[10, 20, 30, 50]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getNotice } from '@/api/statistics';
import { mapGetters } from 'vuex';
export default {
  name: 'Notice',
  data() {
    return {
      loading: false,
      list: [],
      currentPage: 1,
      pageSize: 10,
      noticeCount: 0
    };
  },
  computed: {
    ...mapGetters([
      'shopInfo'
    ])
  },
  created() {
    this.getNotice();
  },
  methods: {
    getNotice() {
      const pageNo = this.currentPage;
      const pageSize = this.pageSize;
      this.loading = true;
      new Promise((resolve, reject) => {
        getNotice({ pageNo, pageSize }).then(({ data }) => {
          this.list = data.notice;
          this.noticeCount = data.size;
          this.loading = false;
          resolve(data);
        }).catch(error => {
          reject(error);
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getNotice();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getNotice();
    }
  }
};
</script>

<style lang="scss" scoped>
.notice {
	width: 100%;
	background-color: #fff;
	color: $textColorDark;
	padding-bottom: 20px;
	min-height: calc(100vh - 195px);
	h2,p{
		margin: 0;
		padding: 0;
	}
	h2{
		font-size: $fontSizeLg;
		padding: 20px 30px;
		border-bottom: 1px solid $borderColor;
	}
	.content{
		height: 100px;
		border-bottom: 1px solid $borderColor;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.table{
		padding: 20px;
		box-sizing: border-box;
		font-size: $fontSizeBase;
	}
	.title{
		height: 50px;
		background-color: $appBg;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-weight: bolder;
	}
	.index{
		flex: 0 0 60px;
		width: 60px;
		text-align: center;
	}
	.text{
		flex: calc(100% - 300px);
		width: calc(100% - 300px);
		margin-right: 60px;
		line-height: calc(22/14);
		padding-left: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
	}
	.date{
		flex: 0 0 180px;
		width: 180px;
	}
	.content{
		.date{
			color: $textColorBase;
		}
	}
	.pagination{
		text-align: center;
	}
}
</style>
